import {Text, TextProps} from 'react-native';
import React, {ReactNode, useMemo} from 'react';
import {observer} from 'mobx-react-lite';
import {useGlobalStore} from '../mobx';
import {mergeStyles} from '../themes';
import {t} from '../utils';
import {
  dpw10,
  dpw12,
  dpw14,
  dpw16,
  dpw18,
  dpw20,
  dpw22,
  dpw24,
  dpw30,
  dpw32,
  dpw36,
  dpw4,
  dpw48,
  dpw6,
  dpw8,
} from '../constants';

type FS = 'mini' | 'small' | 'normal' | 'larget' | 'xl' | '2xl';

export interface ObserverTextProps extends Omit<TextProps, 'style'> {
  /** @description 多语言的 key */
  tKey: string;
  /** @description 需要换肤的样式传递 */
  themeStyle?: Record<string, any>;
  /** @description 不需要换肤的样式传递 */
  style?: Record<string, any>;
  /** @description 多语言变量对象 */
  tOptions?: Record<string, any>;
  type?:
    | 'card-title' // 首页图文单个卡片小标题
    | 'card2-title'
    | 'model-title' // 首页图文模块标题
    | 'desc' // 描述类的文字
    | 'primary' // 主色文字
    | 'tabbar' // tabbar文字
    | 'quick-nav' // 首页快捷导航文字
    | 'tab-title' // 切换的标题
    | 'titles' // 筛选类标题
    | 'btn-more' // 更多按钮文字
    | 'btn-primary' // 主按钮
    | 'btn-link' // 跳转按钮
    | 'tag' // 标记
    | 'tag-1' // 标记
    | 'tag-2' // 标记
    | 'empty' // 空的文字
    | 'head' // 二级标题
    | 'tab-title-h' // 水平切换的标题
    | 'head-t' // 二级标题
    | 'header' // 二级标题
    | 'more'; // 更多
  /** @description 是否激活状态（主要用于双色切换） */
  isActive?: boolean;
  size?: FS;
  colorType?: 'text-btn-1' | 'text-1' | 'text-2' | 'text-3' | 'text-4';
  before?: ReactNode;
  after?: ReactNode;
}

// 文字颜色
const ts = Object.freeze({
  empty: 'color_4',
  primary: 'color_1',
  'card-title': 'color_3',
  'card2-title': 'color_2',
  'text-btn-1': 'color_37',
  'text-1': 'color_36',
  'text-2': 'color_35',
  'text-3': 'color_31',
  'text-4': 'color_2',
});

// 文字大小
const tfs = Object.freeze({
  mini: {
    fs: dpw12,
    lh: dpw18,
  },
  small: {
    fs: dpw14,
    lh: dpw22,
  },
  normal: {
    fs: dpw16,
    lh: dpw24,
  },
  larget: {
    fs: dpw20,
    lh: dpw30,
  },
  xl: {
    fs: dpw24,
    lh: dpw36,
  },
  '2xl': {
    fs: dpw32,
    lh: dpw48,
  },
});

export const ObserverText = observer((props: ObserverTextProps) => {
  const {
    style,
    themeStyle,
    tKey,
    tOptions,
    type,
    isActive,
    numberOfLines,
    size,
    colorType,
    lineBreakMode,
    onPress,
    before,
    after,
  } = props;
  const {theme, language} = useGlobalStore();

  const memoTS = useMemo(() => {
    switch (type) {
      // 特殊文字
      case 'head':
        return mergeStyles({
          style: {
            fontSize: dpw16,
            lineHeight: dpw24,
            fontWeight: 700,
            marginVertical: dpw8,
            ...style,
          },
          themeStyle: {color: 'color_31', ...themeStyle},
          theme,
        });
      case 'header':
        return mergeStyles({
          style: {fontSize: dpw20, lineHeight: dpw30, ...style},
          themeStyle: {color: 'color_31', ...themeStyle},
          theme,
        });
      case 'head-t':
        return mergeStyles({
          style: {
            fontSize: dpw16,
            lineHeight: dpw24,
            fontWeight: 400,
            ...style,
          },
          themeStyle: {color: 'color_2', ...themeStyle},
          theme,
        });
      case 'card-title':
      case 'card2-title':
        return mergeStyles({
          style: {
            fontSize: dpw14,
            lineHeight: dpw22,
            fontWeight: 700,
            ...style,
          },
          themeStyle: {color: ts[type], ...themeStyle},
          theme,
        });
      case 'model-title':
        return mergeStyles({
          style: {
            fontSize: dpw16,
            lineHeight: dpw24,
            fontWeight: 600,
            marginTop: dpw12,
            marginBottom: dpw4,
            ...style,
          },
          themeStyle: {color: 'color_31', ...themeStyle},
          theme,
        });
      case 'tag':
        return mergeStyles({
          style: {
            fontSize: dpw12,
            lineHeight: dpw18,
            paddingHorizontal: 2,
            paddingVertical: 1,
            borderRadius: dpw4,
            ...style,
          },
          themeStyle: {
            color: 'color_2',
            backgroundColor: 'color_1',
            ...themeStyle,
          },
          theme,
        });
      case 'tag-1':
        return mergeStyles({
          style: {
            fontSize: dpw14,
            lineHeight: dpw22,
            paddingHorizontal: 2,
            paddingVertical: 1,
            ...style,
          },
          themeStyle: {color: 'color_14', ...themeStyle},
          theme,
        });
      case 'tag-2':
        return mergeStyles({
          style: {
            fontSize: dpw14,
            lineHeight: dpw22,
            paddingHorizontal: dpw10,
            borderRadius: dpw12,
            ...style,
          },
          themeStyle: {
            color: 'color_2',
            backgroundColor: 'color_43',
            ...themeStyle,
          },
          theme,
        });
      case 'tabbar':
        return mergeStyles({
          style: {fontSize: dpw12, lineHeight: dpw18, ...style},
          themeStyle: {color: isActive ? 'color_1' : 'color_10', ...themeStyle},
          theme,
        });
      case 'quick-nav':
        return mergeStyles({
          style: {fontSize: dpw12, lineHeight: dpw18, ...style},
          themeStyle: {color: isActive ? 'color_1' : 'color_31', ...themeStyle},
          theme,
        });
      case 'tab-title':
        return mergeStyles({
          style: {
            fontSize: dpw16,
            lineHeight: dpw24,
            fontWeight: 600,
            ...style,
          },
          themeStyle: {color: isActive ? 'color_1' : 'color_31', ...themeStyle},
          theme,
        });
      case 'titles':
        return mergeStyles({
          style: {
            fontSize: isActive ? dpw20 : dpw16,
            lineHeight: isActive ? dpw30 : dpw24,
            ...style,
          },
          themeStyle: {color: 'color_31', ...themeStyle},
          theme,
        });
      case 'tab-title-h':
        return mergeStyles({
          style: {
            fontSize: dpw14,
            lineHeight: dpw22,
            fontWeight: isActive ? 700 : 100,
            paddingHorizontal: dpw24,
            paddingVertical: dpw6,
            ...style,
          },
          themeStyle: {
            color: isActive ? 'color_2' : 'color_31',
            backgroundColor: isActive ? 'color_1' : 'color_2',
            ...themeStyle,
          },
          theme,
        });
      case 'more':
        return mergeStyles({
          style: {
            fontSize: dpw12,
            lineHeight: dpw18,
            paddingVertical: 2,
            paddingHorizontal: dpw8,
            borderRadius: dpw18,
            borderWidth: 1,
            ...style,
          },
          themeStyle: {
            color: 'color_31',
            borderColor: 'color_9',
            ...themeStyle,
          },
          theme,
        });
      // 按钮相关
      case 'btn-more':
        return mergeStyles({
          style: {
            fontSize: dpw14,
            lineHeight: dpw22,
            paddingVertical: dpw12,
            borderRadius: dpw4,
            textAlign: 'center',
            ...style,
          },
          themeStyle: {
            color: 'color_13',
            backgroundColor: 'color_12',
            ...themeStyle,
          },
          theme,
        });
      case 'btn-primary':
        return mergeStyles({
          style: {
            fontSize: dpw16,
            lineHeight: dpw24,
            paddingVertical: dpw10,
            borderRadius: dpw8,
            textAlign: 'center',
            ...style,
          },
          themeStyle: {
            color: 'color_2',
            backgroundColor: 'color_1',
            ...themeStyle,
          },
          theme,
        });
      case 'btn-link':
        return mergeStyles({
          style: {
            fontSize: dpw14,
            lineHeight: dpw22,
            paddingVertical: dpw12,
            textAlign: 'center',
            ...style,
          },
          themeStyle: {color: 'color_1', ...themeStyle},
          theme,
        });
      // 普通文字
      case 'desc':
        return mergeStyles({
          style: {fontSize: dpw12, lineHeight: dpw18, ...style},
          themeStyle: {color: 'color_4', ...themeStyle},
          theme,
        });
      case 'empty':
      case 'primary':
      default:
        return mergeStyles({
          style: {
            fontSize: size ? tfs[size].fs : dpw14,
            lineHeight: size ? tfs[size].lh : dpw22,
            ...style,
          },
          themeStyle: {
            color: type || colorType ? ts[colorType || type] : 'color_31',
            ...themeStyle,
          },
          theme,
        });
    }
  }, [type, style, themeStyle, theme, size, colorType, isActive]);

  return (
    <Text
      style={memoTS}
      numberOfLines={numberOfLines}
      lineBreakMode={lineBreakMode}
      onPress={onPress}>
      {before}
      {t(language, tKey, tOptions)}
      {after}
    </Text>
  );
});
